<template>
  <div class="application">
    <div class="headOne">
      <el-row>
        <el-col :span="6">
          <el-input
            style="margin-left: 8.8vw"
            v-model="input1"
            placeholder="请输入创建人"
          /> </el-col
        ><el-col :span="6">
          <el-select
            v-model="input2"
            placeholder="Select"
            size="large"
            style="width: 9vw; margin-left: 9vw; height: 4vh"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /> </el-select></el-col
        ><el-col :span="6">
          <el-input
            style=""
            v-model="input3"
            placeholder="请输入创建人" /></el-col
        ><el-col :span="6">
          <el-input
            style="margin-left: 9.5vw"
            v-model="input4"
            placeholder="请输入创建人"
        /></el-col>
        <el-col :span="6">
          <el-input
            style="margin-left: 8.8vw; margin-top: 6.2vh"
            v-model="input5"
            placeholder="请输入创建人"
          /> </el-col
        ><el-col :span="6">
          <el-input
            style="margin-top: 6.2vh"
            v-model="input6"
            placeholder="请输入工单模板" /></el-col
        ><el-col :span="6">
          <el-input
            style="margin-top: 6.2vh"
            v-model="input7"
            placeholder="请输入创建人" /></el-col
        ><el-col :span="6">
          <el-input
            style="margin-left: 9.5vw; margin-top: 6.2vh"
            v-model="input8"
            placeholder="请输入创建人"
        /></el-col>
        <el-col :span="6">
          <el-input
            style="margin-left: 8.8vw; margin-top: 7vh"
            v-model="input9"
            placeholder="请输入创建人"
          /> </el-col
        ><el-col :span="6">
          <el-input
            style="margin-top: 7vh"
            v-model="input10"
            placeholder="请输入工单模板" /></el-col
        ><el-col :span="12">
          <el-input
            style="margin-top: 7vh"
            v-model="input11"
            placeholder="请输入创建人"
        /></el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const input1 = ref("");
const input2 = ref("请选择");
const input3 = ref("");
const input4 = ref("");
const input5 = ref("");
const input6 = ref("");
const input7 = ref("");
const input8 = ref("");
const input9 = ref("");
const input10 = ref("");
const input11 = ref("");
// const input12 = ref("");
// const input13 = ref("");
const options1 = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>

<style lang="scss" scoped>
.application {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/workOrder/bgn1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .headOne {
    width: 95%;
    height: 27vh;
    margin-top: 17.1vh;
    margin-left: 2.5%;
    position: absolute;
  }
}
.el-input {
  width: 9vw;
  margin-left: 8.5vw;
  height: 4vh;
}
:deep( .el-input__inner) {
  color: #fff !important;
  font-size: 1vw !important;
  box-shadow: none !important;
}

/* 鼠标滑过时不显示边框 */
:deep( .el-input__wrapper:hover) {
  border: none !important;
  box-shadow: none !important;
}

/* 点击时不显示边框 */
:deep( .el-input__wrapper:focus) {
  border: none !important;
  box-shadow: none !important;
}
:deep( .el-input__wrapper) {
  background-color: transparent !important;
  box-shadow: none !important;
}
/* 移除 el-select 在 focus 和 active 状态下的边框 */
:deep( .el-select .el-input .el-input__inner:focus),
:deep( .el-select .el-input .el-input__inner:active) {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
:deep( .el-select .el-input__wrapper.is-focus){
    box-shadow: none !important;
}
:deep( .el-select .el-input.is-focus .el-input__wrapper){
    box-shadow: none !important;
}
</style>
